import React, { useState } from 'react';
import {
  AutoComplete,
  Button,
  Cascader,
  Checkbox,
  Col,
  Form,
  Input,
  InputNumber,
  message,
  Row,
  Select,
} from 'antd';
import emailjs from '@emailjs/browser';

const USER_ID = 'yjUaxQstLg8esvGnV'
const TEMPLATE_ID = 'template_3rdshmo'
const SERVICE_ID = 'service_5rizjgs'


const { Option } = Select;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};


const FormContactUs = () => {
  const [form] = Form.useForm();

  const onFinish = values => {
    const { name, phone, email, company, address, ask } = values
    const templateParams = {
      name,
      email,
      phone,
      company,
      address,
      ask
    };
    emailjs
      .send(SERVICE_ID, TEMPLATE_ID, templateParams, {
        publicKey: USER_ID,
      })
      .then(
        (response) => {
          message.success('Submit Success!')
          form.resetFields()
        },
        (err) => {
          message.error('Please try again!')

        },
      );
  };


  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select style={{ width: 70 }}>
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );
  const suffixSelector = (
    <Form.Item name="suffix" noStyle>
      <Select style={{ width: 70 }}>
        <Option value="USD">$</Option>
        <Option value="CNY">¥</Option>
      </Select>
    </Form.Item>
  );
  const [autoCompleteResult, setAutoCompleteResult] = useState([]);
  const onAddressChange = value => {
    if (!value) {
      setAutoCompleteResult([]);
    } else {
      setAutoCompleteResult(['.com', '.org', '.net'].map(domain => `${value}${domain}`));
    }
  };
  const addressOptions = autoCompleteResult.map(address => ({
    label: address,
    value: address,
  }));
  return (
    <Form
      {...formItemLayout}
      form={form}
      name="register"
      onFinish={onFinish}
      initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86' }}
      style={{ maxWidth: 600, marginTop: 25 ,marginLeft:'24px',}}
      scrollToFirstError
    >
      <Form.Item 
        name="name"
        label="Name"
        rules={[{ required: true, message: 'Please input your name!', whitespace: true }]}
      >
        <Input placeholder='Please input name' />
      </Form.Item>

      <Form.Item
        name="phone"
        label="Phone"
        rules={[{ required: true,message: 'Please input your phone number!' }]}
      >
        <Input placeholder='Please input phone' />
      </Form.Item>

      <Form.Item
        name="email"
        label="Email"

      >
        <Input placeholder='Please input email'/>
      </Form.Item>

      <Form.Item
        name="company"
        label="Company"
      >
      
          <Input placeholder='Please input company'/>
        
      </Form.Item>

      <Form.Item
        name="address"
        label="Address"
        rules={[{ message: 'Please input address!' }]}
      >

        <Input placeholder='Please input address'/>

      </Form.Item>

      <Form.Item
        name="ask"
        label="Ask"
        rules={[{ message: 'Please input ask' }]}
      >
        <Input.TextArea showCount maxLength={100}  placeholder='Please input ask'/>
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
export default FormContactUs;